<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ht5 Websites (demo)</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="scripts/jquery.timers.1.2.js"></script>

<!-- Blueprint framework CSS -->
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen, projection">

<style>
.content
{
	display:none;
}
</style>

</head>
<body>

<div class="container">
	<div class="top-int"></div>
    <h6 class="content">Giant Robot www&nbsp;&nbsp;|&nbsp;&nbsp;Profiler&nbsp;&nbsp;|&nbsp;&nbsp;Settings</h6>
	<div class="content feature-1 colborder">
    	<iframe src="http://player.vimeo.com/video/5233789?title=0&amp;byline=0&amp;portrait=0" width="560" height="314" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
    </div>
    <div class="feature-less-1 content">
    	<div class="feature-less-1-space">
            <div class="span-3 border space-1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            </div>
            <div class="span-3 border space-1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            </div>
            <div class="span-3 last" style="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            </div>
            <br class="clear" />
            <div class="span-3 border space-1">
                <p><img src="images/thumb-1.png" width="100" height="55" /></p>
          </div>
            <div class="span-3 border space-1">
                <p><img src="images/thumb-2.png" width="100" height="55" /></p>
          </div>
            <div class="span-3 last">
                <p><img src="images/thumb-3.png" width="100" height="55" /></p>
          </div>
        </div>
    </div>
    <hr class="content" />
	<div class="content feature-2 colborder">
    	<div class="feature-2-space">
            <div class="span-4 border space-1">
                <h3>Real-time</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            </div>
            <div class="span-4 border space-1">
                <h3>Feed</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            </div>
            <div class="span-4 last space-1">
                <h3>Profiles</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            </div>
        </div>
    </div>
    <div class="feature-less-2 content">
    	<div class="feature-less-2-space">
            <div class="span-3 prepend-1 append-1">
            	<p><img src="images/thumb-5.png" width="100" height="35" style="padding-bottom:5px;" /><br />
           	  Lorem ipsum dolor sit amet, consectetur</p>
          </div>
            <div class="span-3 prepend-4 append-1">
            	<p><img src="images/thumb-4.png" width="100" height="35" style="padding-bottom:5px;" /><br />
           	  Lorem ipsum dolor sit amet, consectetur</p>
          </div>
            <div class="span-3 prepend-7 append-1 last">
            	<p><img src="images/thumb-6.png" width="100" height="35" style="padding-bottom:5px;" /><br />
           	  Lorem ipsum dolor sit amet, consectetur</p>
          </div>
      </div>
    </div>
    
    <div class="content"><img src="images/ht5_websites.png" /></div>

</div>
    
<script>

	// http://blog.mastykarz.nl/jquery-random-filter/
	// http://www.javascripttoolbox.com/jquery/

	/*
    $().ready(function() {
        alert($("li:random").text());
    });

	jQuery.jQueryRandom = 0;
	jQuery.extend(jQuery.expr[":"],
	{
		random: function(a, i, m, r) {
			if (i == 0) {
				jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
			};
			return i == jQuery.jQueryRandom;
		}
	});
	*/

	$().ready(function() {

		var times;
		var contentArray = new Array();
		
		findContent('h6');
		findContent('div');		
		findContent('hr')
		
		times = contentArray.length; // set number of times to call timer
		
		$(document).everyTime(800, function(i) {
		   setupPage(i);
		}, times);
		
		function findContent(element)
		{
			$(element).each(function(index) {	
				if($(this).is('.content'))
				{
					if(element == 'hr')
					{
						contentArray.splice(3,0,$(this));
					} else {
						contentArray.push($(this));
					}
				}
			});
		}
		
		function setupPage(i)
		{
			$(contentArray[i-1]).fadeIn(400);
		}
		
	}); 

</script> 
    
</body>
</html>
